<template>
    <div class="common-layout">
        <el-row>
            <el-col :span="8">
                <el-select v-model="state.selected" class="m-2" placeholder="Select" 
                filterable
                @change="change"
                size="large">
                    <el-option v-for="item in state.category" :key="item" :label="item" :value="item" />
                </el-select>

                <el-text> 数量：{{ state.data.length }} </el-text>

            </el-col>
        </el-row>

        <el-table :data="state.data" height="900" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        @cell-click="typeClick"
        :default-sort="state.sort"
        style="width: 100%">
            <el-table-column prop="stock" label="股票" width="150">
                <template #default="scope">
                    <ToStockDetail :stock="scope.row.stock" />
                </template> 
            </el-table-column>
            <el-table-column prop="date" label="添加日期" sortable width="120"/>
            <el-table-column prop="category" label="分类" sortable width="150"/>
            <el-table-column prop="type" label="监控类型" sortable width="180"/>
            <el-table-column prop="description" label="描述" width="200"/>
            <el-table-column prop="extra" label="额外数据" width="200"/>
            <el-table-column prop="weight" label="权重" sortable width="200"/>
        </el-table>
    </div>
</template>

<script>
import { computed, reactive } from 'vue';
import { getMonitorData } from '../service/monitor';
import IndustryTag from './IndustryTag.vue';
import ToStockDetail from './ToStockDetail.vue';
import { getSessionStorage, setSessionStorage } from '../utils/help';

export default {
    components: {
        IndustryTag,
        ToStockDetail
    },
    setup() {
        const baseKey = "monitor"
        const selectKey = baseKey + "Select"
        const sortPropKey = baseKey + "SortProp"
        const sortOrderKey = baseKey + "SortOrder"

        const state = reactive({
            rawData: [],
            data: [],
            category: new Set(),
            selected: getSessionStorage(selectKey) || '全部',
            sort: { 
                prop: getSessionStorage(sortPropKey) || '' , 
                order: getSessionStorage(sortOrderKey) || '' 
            }
        })

        getMonitorData().then( res => {
            state.rawData = res.data
            state.data = state.rawData

            state.category.add("全部")
            state.rawData.forEach(item => {
                state.category.add(item.type)
            })

            change()
        })

        const change = () => {
            if (state.selected === "全部") {
                state.data = state.rawData
            } else {
                state.data = state.rawData.filter(item => item.type === state.selected)
            }

            setSessionStorage(selectKey, state.selected)
        }

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const typeClick = (row, column, cell, event) => {
            var columnProperty = column.property
            if (columnProperty == "type") {
                // 还原
                if (state.selected === row.type) {
                    state.selected = "全部"
                } else {
                    state.selected = row.type
                }
                
                change()
            }
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if (columnProperty == "category") {
                if  (!row.category) {
                    return ''
                }
                if (row.category == "新高") {
                    return 'lpgt99-cell'
                }
                if (row.category.includes("DOWN")) {
                    return 'lt0-cell'
                }
                if (row.category.includes("UP")) {
                    return 'd300up-cell'
                }
            }
            return ''
        }

        return {state, tableCellClassName, sortChange, change, typeClick }
    }
}
</script>

<style>
</style>